<template>
	<view class="my">
<!-- 	<view class="my" :style="`background-image: url(${imagePrefix}/photo/background_top.png);`"> -->
		<!-- <image class=".background_top_img" src="../../static/my/background_top.png"></image> -->
		<view class="my_info">
			<view class="head_sculpture" @tap="editMyInfo()">
				<!-- <image v-if="userLogin" :src="userInfoData.avatar || '../../static/my/unregisteredAvatar.png'"></image> -->
				<image src="/static/my/default-avator.png"></image>
			</view>
			<view class="my_info_content" @click="onLogin">
				<template v-if="userLogin">
					<view class="my_info_userName">{{ userInfoData.userName || '暂无' }}</view>
					<!-- <view class="my_info_golden">
						金豆剩余：{{ userInfoData.goldenBean || 0 }}
						<image class="my_info_btn" @click="toNav('/pages/my/voucherCenter')" src="/static/other/gold-bean-charge.svg" mode="aspectFit"></image>
					</view> -->
				</template>
				<template v-else>
					<view class="no_log">登陆/注册</view>
				</template>
			</view>
		</view>
		<view class="my_box">
			<view class="order_record">
				<view class="order_record_box" @tap="toNav('/pages/my/cameraRecord')">
					<view class="order_record_box_left">
						<view class="order_record_box_leftT1">照片记录</view>
						<view class="order_record_box_leftT2">处理过的照片</view>
					</view>
					<view class="order_record_box_right">
						<image src="../../static/my/history.png"></image>
					</view>
				</view>
				<view class="order_record_box" @tap="toNav('/pages/my/printingOrders')">
					<view class="order_record_box_left">
						<view class="order_record_box_leftT1">冲印订单</view>
						<view class="order_record_box_leftT2">查看订单详情</view>
					</view>
					<view class="order_record_box_right">
						<image src="../../static/my/printingOrders.png"></image>
					</view>
				</view>
			</view>
		<!-- 	<uni-swiper-dot class="swiper_dot"
			 :info="swiperList" :dotsStyles="dotsStyles"
			 :current="swiperCurrent" mode="round"
			 @clickItem="clickItem">
				<swiper class="swiper" :current="swiperCurrent" @change="swiperCurrentChange" :autoplay="true" :circular="true" :interval="3000">
					<swiper-item class="swiper_item"
					 v-for="(item, index) in swiperList" :key="index">
						<image :src="item"></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot> -->
			<view class="menu_box">
				<template v-for="(item, index) in menuList">
					<template v-if="item.type == 'nav'">
						<view class="menu_item" :key="index" @tap="toNav(item.path)">
							<view class="menu_item_left">
								<image :src="item.icon"></image>
								<view class="menu_item_title">{{ item.title }}</view>
							</view>
							<view class="menu_item_right">
								<image src="../../static/my/menuTo_btn.png"></image>
							</view>
						</view>
					</template>
					<template v-else>
						<button type="default" @click="toShare" :key="index" :plain="true" style="padding: 0;border: none;line-height: 0;">
							<view class="menu_item" :key="index">
								<view class="menu_item_left">
									<image :src="item.icon"></image>
									<view class="menu_item_title">{{ item.title }}</view>
								</view>
								<view class="menu_item_right">
									<image src="../../static/my/menuTo_btn.png"></image>
								</view>
							</view>
						</button>
					</template>

				</template>
			</view>
		</view>
		<empowerPopup :empowerShow="empowerShow" @close="empowerPopupClose"></empowerPopup>
	</view>
</template>

<script setup>
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import customNav from '@/components/custom-nav/index.vue'
	import empowerPopup from '@/components/empower-popup/empower-popup.vue'

	import { ref, reactive, computed } from 'vue';
	import {imagePrefix} from '@/common/js/data.js';
	import { checkLogin } from '@/common/js/method.js'
	
	onLoad((opt)=>{
	})
	const toShare = () =>{
		uni.navigateTo({
			url: '/pages/share/share',
		})
	}

	const empowerShow = ref(false);
	
	const headSculpture = ref('');
	const popupShow = ref(false);
	// 个人信息
	const userInfoData = ref({});
	const userLogin = computed(()=>{
		return uni.getStorage('userLogin');
	});
	onShow(()=>{
		userInfoData.value = uni.getStorageSync('userInfo');
	})
	// 修改个人信息
	function editMyInfo() {
		if(userLogin) {
			uni.navigateTo({
				url: '/pages/my/userInfo'
			})
		}else {
			onLogin();
		}
	}
	const dotsStyles = {
		backgroundColor: '#ffffff',
		selectedBackgroundColor: '#ffffff',
		selectedBorder: 'none'
	}
	
	const swiperCurrent = ref(0);
	const swiperList = reactive([
		'https://sspzjz.oss-cn-shanghai.aliyuncs.com/swiper/gonglue1.png',
		'https://sspzjz.oss-cn-shanghai.aliyuncs.com/swiper/gonglue2.png',
		'https://sspzjz.oss-cn-shanghai.aliyuncs.com/swiper/gonglue3.png',
		'https://sspzjz.oss-cn-shanghai.aliyuncs.com/swiper/gonglue4.png',
		'https://sspzjz.oss-cn-shanghai.aliyuncs.com/swiper/gonglue5.png',
	]);
	function swiperCurrentChange(e) {
		swiperCurrent.value = e.target.current;
	}
	function clickItem(e) {
		swiperCurrent.value = e;
	}
	
	// 菜单列表
	const menuList = reactive([
		// {title: '充值记录', icon: '../../static/my/menuIcon1.png', type: 'nav', path: '/pages/my/rechargeRecord'},
		{title: '联系客服', icon: '../../static/my/menuIcon2.png', type: 'nav', path: '/pages/my/customerServiceCenter'},
		{title: '服务条款', icon: '../../static/my/menuIcon3.png', type: 'nav', path: '/pages/my/termOfService'},
		{title: '推荐给好友', icon: '../../static/my/menuIcon4.png', type: 'share', path: ''},
		// {title: '考典秘籍', icon: '../../static/my/menuIcon5.png', path: '/pages/my/classicScriptsEx'},
		// {title: '资料订单', icon: '../../static/my/menuIcon6.png', path: '/pages/my/dataOrder'},
	])
	// 跳转至菜单页面
	function toNav(path) {
			uni.navigateTo({
				url: path,
				fail(err) {
					console.log(err);
				}
			})
	}
	
	const onLogin = () => {
		if(userLogin) {
			return
		}
		checkLogin().catch((err)=>{
			empowerShow.value = true;
		})
	}
	function empowerPopupClose() {
		empowerShow.value = false;
	}
</script>

<style lang="less" scoped>
.my {
	position: relative;
	min-height: 100vh;
	background-size: 100% 520rpx;
	background-color: #f5f5f5;
	background-repeat: no-repeat;
	box-sizing: border-box;
	// padding: 7.5% 0;
	.my_info {
		box-sizing: border-box;
		padding: 34rpx 32rpx;
		background-image: url('../../static/my/background_top.png');
	}
	.my_box {
		box-sizing: border-box;
		padding: 0 32rpx;
	}
}
.top {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	font-size: 34rpx;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 40rpx;
	.top_left {
		image {
			margin-top: 6rpx;
			width: 24rpx;
			height: 42rpx;
		}
	}
}
.my_info {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	// margin-top: 50rpx;
	position: relative;
}
.head_sculpture {
	image {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		box-shadow: 4rpx 4rpx 8rpx  rgba(0, 0, 0, 0.05);
	}
}
.my_info_content {
	margin-left: 20rpx;
	.my_info_userName {
		font-size: 40rpx;
		font-weight: 500;
		letter-spacing: 0;
		line-height: 56rpx;
		color: rgba(255, 255, 255, 1);
	}
	.my_info_golden {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 24rpx;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 34rpx;
		color: rgba(255, 255, 255, 1);
	}
	.my_info_btn {
		position: absolute;
		right: 32rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 240rpx;
		height: 80rpx;
		// font-size: 24rpx;
		// font-weight: 400;
		// letter-spacing: 0;
		// line-height: 34rpx;
		// color: rgba(255, 255, 255, 1);
		// border-radius: 100rpx;
		// border: 2rpx solid rgba(255, 255, 255, 1);
		// padding: 0 20rpx;
	}
	.no_log {
		font-size: 40rpx;
		font-weight: 500;
		letter-spacing: 0;
		line-height: 58rpx;
		color: #ffffff;
	}
}
.order_record {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 20rpx;
	margin-top: 20rpx;
	.order_record_box {
		 border-radius: 8px;
		 box-shadow: 0px 1px 2px  rgba(0, 0, 0, 0.02);
		 display: flex;
		 justify-content: space-between;
		 align-items: center;
		 box-sizing: border-box;
		 padding: 40rpx 32rpx 40rpx 32rpx;
		 background-color: #ffffff;
	 }
	 .order_record_box_left {
		 .order_record_box_leftT1 {
			 font-size: 32rpx;
			 font-weight: 700;
			 letter-spacing: 0;
			 line-height: 48rpx;
		 }
		 .order_record_box_leftT2 {
			 margin-top: 6rpx;
			 font-size: 24rpx;
			 font-weight: 400;
			 letter-spacing: 0;
			 line-height: 35rpx;
			 color: #A6A6A6;

		 }
	 }
	 .order_record_box_right {
		 width: 72rpx;
		 height: 72rpx;
		 image {
			 width: 100%;
			 height: 100%;
		 }
	 }
}
/deep/ .uni-swiper__dots-box.data-v-0667e3db {
	margin-right: 20rpx;
	justify-content: flex-end!important;
}
.swiper {
	margin-top: 40rpx;
	height: 200rpx;
	.swiper_item {
		border-radius: 16rpx;
		image {
			height: 100%;
			width: 100%;
		}
	}
}
.menu_box {
	margin-top: 40rpx;
	background-color: #ffffff;
	padding: 0 32rpx;
	box-sizing: border-box;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 4rpx  rgba(0, 0, 0, 0.02);
	.menu_item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx 0;
		border-bottom: 2rpx solid #F5F5F5;
		background-color: transparent;
	}
	button {
		background-color: transparent;
	}
	button::after {
		content: " ";
		border: none;
	}
	.menu_item:last-child {
		border-bottom: none;
	}
	.menu_item_left {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		image {
			width: 48rpx;
			height: 48rpx;
		}
		button {
			padding: 0;
			background-color: transparent;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.menu_item_title {
			margin-left: 20rpx;
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0;
			line-height: 40.5rpx;
		}
	}
	.menu_item_right {
		image {
			width: 16rpx;
			height: 25rpx;
		}
	}
}
.popupBox {
	box-sizing: border-box;
	width: 100%;
	padding: 32rpx;
	background-color: #ffffff;
	.popupTitle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		&:last-child {
			margin-bottom: 0;
		}
	}
	.popupCon {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
</style>
